:root {
  --clock-size: min(100vh - 140px, 90vw);
  --clock-border: min(2vh, 2vw);
  --hand-color: black;
  --tick-color: black;
  --clock-color: black;
  --digit-color: brown;
}

.clock {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--clock-size);
  height: var(--clock-size);
  margin: 2rem auto 0;
  border: min(2vh, 2vw) solid var(--clock-color);
  border-radius: 50%;
}

.ticks {
  position: absolute;
  width: 100%;
  height: 100%;
}

.tick {
  position: absolute;
  height: 1%;
  background-color: var(--tick-color);
  border: 1px solid var(--tick-color);
  transform: translate(-50%, -50%);
  transform-origin: top left;
}

.tick:nth-child(5n + 1) {
  width: 0.25%;
  height: 1.5%;
}

.digits {
  position: absolute;
  width: 90%;
  height: 90%;
  font-size: min(4vh, 4vw);
  font-weight: 600;
  color: var(--digit-color);
}

.digit {
  position: absolute;
  text-shadow: 0 2px rgb(0, 0, 0, 15%);
  transform: translate(-50%, -50%);
}

.bgImg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.75;
}

.centerConnector {
  position: absolute;
  z-index: 100;
  width: 5%;
  height: 5%;
  background-color: var(--clock-color);
  border-radius: 50%;
}

.secondsHand,
.minutesHand,
.hoursHand {
  position: absolute;
  background-color: var(--hand-color);
  transform-origin: 50% 100%;
}

.hoursHand {
  top: 20%;
  left: calc(50% - 2.5px);
  width: 0.5%;
  height: 30%;
}

.minutesHand {
  top: 5%;
  left: calc(50% - 1.5px);
  width: 0.3%;
  height: 45%;
}

.secondsHand {
  top: 15%;
  left: calc(50% - 0.5px);
  width: 0.1%;
  height: 55%;
  transform-origin: 50% 63.5%;
}

.secondsHand::before {
  position: absolute;
  bottom: 0;
  left: -250%;
  width: 600%;
  height: 25%;
  content: '';
  background-color: var(--hand-color);
}
